<template>
  <div>
    <div class="main">
      <div class="content">
        <div class="nav">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>视频详情</el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <ClassPageMainMain :classList="classList"/>

        <ClassPageMainBottom :classList="classList"/>
      </div>
    </div>
  </div>
</template>

<script>

import {getClasscourse} from "@/api/index-api";
import ClassPageMainMain from "@/views/Index/components/ClassPageMainMain";
import ClassPageMainBottom from "@/views/Index/components/ClassPageMainBottom";

export default {
  name: "ClassPageMain",
  data() {
    return {
      classID: '',
      classList: ''
    };
  },
  created() {
    console.log(this.$route.params.id)
    this.classID = this.$route.params.id
    getClasscourse(this.$route.params.id).then(res => {
      console.log(res.data)
      this.classList = res.data
    })
  },
  components:{
    ClassPageMainMain,
    ClassPageMainBottom
  },
  methods: {

  }
}
</script>


<style lang="less" scoped>
.main {
  width: 100%;
  padding-bottom: 50px;
  background-color: #f1f1f1;

  .content {
    width: 1200px;
    margin: 0 auto;

    .nav {
      padding: 10px 0;
    }
  }
}
</style>
<style lang="less">
.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link {
  font-weight: 400;
}

.el-tabs__item.is-active {
  color: #00cf8c;
}

.el-tabs__item:hover {
  color: #00cf8c;
}

.el-tabs__active-bar {
  background-color: #00cf8c;
}
</style>